<template>
  <div class="user-center">
    <div class="user-box">
      <div class="user-left">
        <UserLeft></UserLeft>
      </div>
      <div class="user-right">
        <h1>完善团队信息<span> (*是必填项)</span></h1>
        <div class="user-info-box">
          <el-form
            ref="ruleForm"
            :rules="rules"
            label-position="right"
            label-width="140px"
            :model="ruleForm"
          >
            <el-form-item label="参赛编号：" prop="number">
              <p>{{ userInfo.match_number }}</p>
            </el-form-item>
            <el-form-item label="团队名称：" prop="title">
              <el-input
                v-model="ruleForm.title"
                style="width: 350px"
              ></el-input>
            </el-form-item>
            <el-form-item label="说明：">
              <div class="title-list">
                <p class="flex-1">姓名</p>
                <p class="flex-1">性别</p>
                <p class="flex-2">工作部门</p>
                <p class="flex-2">职务</p>
                <p class="flex-2">手机号</p>
                <p class="flex-2">邮箱</p>
              </div>
            </el-form-item>
            <el-form-item label="负责人:">
              <div class="title-list">
                <el-input class="flex-1" v-model="type0.name"></el-input>
                <el-select
                  class="flex-1"
                  v-model="type0.sex"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input class="flex-2" v-model="type0.work_branch"></el-input>
                <el-input class="flex-2" v-model="type0.job"></el-input>
                <el-input class="flex-2" v-model="type0.phone"></el-input>
                <el-input class="flex-2" v-model="type0.email"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="联系人:">
              <div class="title-list">
                <el-input class="flex-1" v-model="type1.name"></el-input>
                <el-select
                  class="flex-1"
                  v-model="type1.sex"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input class="flex-2" v-model="type1.work_branch"></el-input>
                <el-input class="flex-2" v-model="type1.job"></el-input>
                <el-input class="flex-2" v-model="type1.phone"></el-input>
                <el-input class="flex-2" v-model="type1.email"></el-input>
              </div>
            </el-form-item>
            <el-form-item
              label="成员："
              v-for="(item, index) in ruleForm.userList"
              :key="index"
            >
              <div class="title-list">
                <el-input class="flex-1" v-model="item.name"></el-input>
                <el-select
                  class="flex-1"
                  v-model="item.sex"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item2 in options"
                    :key="item2.value"
                    :label="item2.label"
                    :value="item2.value"
                  >
                  </el-option>
                </el-select>
                <el-input class="flex-2" v-model="item.work_branch"></el-input>
                <el-input class="flex-2" v-model="item.job"></el-input>
                <el-input class="flex-2" v-model="item.phone"></el-input>
                <el-input class="flex-2" v-model="item.email"></el-input>
                <i
                  class="el-icon-remove-outline remove"
                  @click="removeAttr(item, index)"
                ></i>
              </div>
            </el-form-item>
            <el-form-item label="操作：" prop="smsCode">
              <el-button class="add" type="primary" @click="addUser"
                >+ 新增成员</el-button
              >
            </el-form-item>
          </el-form>
          <div class="submit-box">
            <el-button class="submit" @click="submit()" type="primary"
              >提交</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserLeft from "./components/UserLeft";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    UserLeft,
  },
  data() {
    return {
      ruleForm: {
        title: "",
        userList: [],
      },
      type0: {
        type: 0,
        id: "",
        name: "",
        sex: "",
        work_branch: "",
        job: "",
        phone: "",
        email: "",
      },
      type1: {
        type: 1,
        id: "",
        name: "",
        sex: "",
        work_branch: "",
        job: "",
        phone: "",
        email: "",
      },
      personnelList: [],
      rules: {
        name: [{ required: true, message: "请输入团队名称", trigger: "blur" }],
      },
      options: [
        {
          value: 0,
          label: "男",
        },
        {
          value: 1,
          label: "女",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions(["teamSave", "getUserInfo"]),
    init() {
      this.getUserInfo().then((res) => {
        let list = [];
        this.userTeamInfo.items.forEach((item) => {
          if (item.type == 0) {
            this.type0 = item;
          } else if (item.type == 1) {
            this.type1 = item;
          } else {
            list.push(item);
          }
        });
        this.ruleForm.userList = list;
        this.ruleForm.title = this.userTeamInfo.title;
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.personnelList.push(this.type0);
          this.personnelList.push(this.type1);
          this.personnelList = this.personnelList.concat(
            this.ruleForm.userList
          );
          let data = {
            title: this.ruleForm.title,
            personnelList: this.personnelList,
            delete_ids: "",
          };
          this.teamSave(data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.getUserInfo();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addUser() {
      let item = {
        type: 2,
        id: "",
        name: "",
        sex: "",
        work_branch: "",
        job: "",
        phone: "",
        email: "",
      };
      this.ruleForm.userList.push(item);
    },
    removeAttr(item, index) {
      this.$confirm("是否删除该成员", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          if (item.id) {
            this.teamSave({ delete_ids: [item.id] }).then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
            });
          } else {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.ruleForm.userList.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  computed: {
    ...mapGetters(["userInfo", "userTeamInfo"]),
  },
};
</script>

<style scoped>
.user-info-box {
  min-height: 700px;
}
.title-list {
  width: 100%;
  display: flex;
}
.title-list .flex-2 {
  flex: 1.5;
  margin: 0 5px;
}
.title-list .flex-1 {
  flex: 1;
  margin: 0 5px;
}
.remove {
  font-size: 24px;
  line-height: 40px;
  cursor: pointer;
}
</style>